import React, { useState, useEffect } from "react";

const List = (props) => {
  const [list, setList] = useState([]);
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount((count) => count + 1);
    setTimeout(() => {
      setList([
        { name: props.text, value: Math.random() },
        { name: props.text, value: Math.random() },
        { name: props.text, value: Math.random() },
        { name: props.text, value: Math.random() },
        { name: props.text, value: Math.random() },
        { name: props.text, value: Math.random() },
        { name: props.text, value: Math.random() },
      ]);
    }, 500);
  }, [props.text]);
  
  return [
    <p>{"我被触发了" + count + "次"}</p>,
    <ul>
      {list.map((item) => (
        <li>
          Hello:{item.name} value:{item.value}
        </li>
      ))}
    </ul>,
  ];
};
export default List;
